<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>第三方库包的参考及介绍.md | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="项目构建," />
  

  
  <meta name="description" content="如果我们的政策导致两极分化，我们就失败了《一靠理想二靠纪律才能团结起来》《邓小平文选》第三卷第111页">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2021-04-07
    </span>
    
      <span>
        | <a href="/blog/categories/%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA/"><i class="fa fa-bookmark"></i>项目构建</a>
      </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2021-12-6 13:56 
    </span>
  </div>
  <h1 class="passage-title">
    第三方库包的参考及介绍.md
  </h1>
  
  <article class="passage-article">
    <h2 id="功能性"><a href="#功能性" class="headerlink" title="功能性"></a>功能性</h2><h3 id="Cookie的设置-js-cookie"><a href="#Cookie的设置-js-cookie" class="headerlink" title="Cookie的设置 js-cookie"></a>Cookie的设置 js-cookie</h3><p>用于存储，编辑和读取 cookie；<a target="_blank" rel="noopener" href="https://github.com/js-cookie/js-cookie">GitHub</a> | <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/js-cookie">NPM</a></p>
<h3 id="存储数据-localForage"><a href="#存储数据-localForage" class="headerlink" title="存储数据  localForage"></a>存储数据  localForage</h3><p>可以在浏览器存储大量离线数据；<a target="_blank" rel="noopener" href="https://github.com/localForage/localForage">GitHub</a> | <a target="_blank" rel="noopener" href="https://github.com/xmoyking/localForage-cn">中文翻译</a></p>
<h3 id="二维码生成器-node-qrcode"><a href="#二维码生成器-node-qrcode" class="headerlink" title="二维码生成器  node-qrcode"></a>二维码生成器  node-qrcode</h3><p>使用URL字符串生成一个二维码； <a target="_blank" rel="noopener" href="https://github.com/soldair/node-qrcode">GitHub</a></p>
<h3 id="剪切板-clipboard"><a href="#剪切板-clipboard" class="headerlink" title="剪切板 clipboard"></a>剪切板 clipboard</h3><p>用于复制，剪切，黏贴功能；提供一键复制功能业务场景； <a target="_blank" rel="noopener" href="https://github.com/zenorocha/clipboard.js">GitHub</a></p>
<h3 id="代码编辑器-CodeMirror"><a href="#代码编辑器-CodeMirror" class="headerlink" title="代码编辑器 CodeMirror"></a>代码编辑器 CodeMirror</h3><p>在浏览器上进行代码编辑； <a target="_blank" rel="noopener" href="https://github.com/codemirror/CodeMirror">GitHub</a></p>
<p><strong>Vue-Codemirror</strong><br>基于 Codemirror，适用于 Vue 的 Web 代码编辑器 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/vue-codemirror">NPM</a></p>
<h3 id="流程图编辑器-bpmn-js"><a href="#流程图编辑器-bpmn-js" class="headerlink" title="流程图编辑器  bpmn-js"></a>流程图编辑器  bpmn-js</h3><p>在浏览器上进行流程图编辑； <a target="_blank" rel="noopener" href="https://github.com/bpmn-io/bpmn-js">GitHub</a> | <a target="_blank" rel="noopener" href="https://bpmn.io/toolkit/bpmn-js/">官网</a></p>
<p><strong>bpmn-js-properties-panel</strong><br>基于 bpmn-js 进行的编辑功能扩展； <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/bpmn-js-properties-panel">NPM</a> bpmn-js的编辑扩展</p>
<h3 id="前端引导-driver-js"><a href="#前端引导-driver-js" class="headerlink" title="前端引导 driver.js"></a>前端引导 driver.js</h3><p>可以让用户聚焦于你想要的地方；或者引导用户；<a target="_blank" rel="noopener" href="https://github.com/kamranahmedse/driver.js">GitHub</a></p>
<h3 id="文件拖拽上传-dropzone"><a href="#文件拖拽上传-dropzone" class="headerlink" title="文件拖拽上传 dropzone"></a>文件拖拽上传 dropzone</h3><p>可以让上传功能变的更加舒服； <a target="_blank" rel="noopener" href="https://github.com/dropzone/dropzone">GitHub</a></p>
<h3 id="图表功能-echarts"><a href="#图表功能-echarts" class="headerlink" title="图表功能 echarts"></a>图表功能 echarts</h3><p>设置图表，让数据可视化 <a target="_blank" rel="noopener" href="https://github.com/dropzone/dropzone">GitHub</a></p>
<h3 id="文件流下载-FileSaver"><a href="#文件流下载-FileSaver" class="headerlink" title="文件流下载 FileSaver"></a>文件流下载 FileSaver</h3><p>设置文件链接为blob下载，支持图片及其他 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/file-saver">NPM</a></p>
<h3 id="本地数据搜索-fuse-js"><a href="#本地数据搜索-fuse-js" class="headerlink" title="本地数据搜索 fuse.js"></a>本地数据搜索 fuse.js</h3><p>设置本地数据搜索功能 <a target="_blank" rel="noopener" href="https://github.com/krisk/Fuse">GitHub</a> | <a target="_blank" rel="noopener" href="https://fusejs.io/">官网</a></p>
<h3 id="创建读取zip文件-jszip"><a href="#创建读取zip文件-jszip" class="headerlink" title="创建读取zip文件 jszip"></a>创建读取zip文件 jszip</h3><p>用于创建、读取和编辑 .zip 文件 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/jszip">NPM</a> <a target="_blank" rel="noopener" href="https://stuk.github.io/jszip/">官网</a></p>
<h3 id="预览-docx文件-mammoth"><a href="#预览-docx文件-mammoth" class="headerlink" title="预览.docx文件 mammoth"></a>预览.docx文件 mammoth</h3><p>浏览器预览.docx文件 <a target="_blank" rel="noopener" href="https://github.com/mwilliamson/mammoth.js">GitHub</a> | <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/mammoth">NPM</a></p>
<h3 id="预览excel文件-sheetjs"><a href="#预览excel文件-sheetjs" class="headerlink" title="预览excel文件 sheetjs"></a>预览excel文件 sheetjs</h3><p>浏览器预览excel（.xlsx .xls）文件 <a target="_blank" rel="noopener" href="https://github.com/SheetJS/sheetjs">GitHub</a> | <a target="_blank" rel="noopener" href="https://sheetjs.com/">官网</a></p>
<h3 id="日期格式处理-moment"><a href="#日期格式处理-moment" class="headerlink" title="日期格式处理 moment"></a>日期格式处理 moment</h3><p>处理日期时间格式 <a target="_blank" rel="noopener" href="https://github.com/moment/moment">GitHub</a> | <a target="_blank" rel="noopener" href="http://momentjs.cn/">中文翻译</a></p>
<h3 id="请求进度条-nprogress"><a href="#请求进度条-nprogress" class="headerlink" title="请求进度条 nprogress"></a>请求进度条 nprogress</h3><p>在页面顶部显示进度条，告诉用户请求进度情况 <a target="_blank" rel="noopener" href="https://github.com/rstacruz/nprogress">GitHub</a> <a target="_blank" rel="noopener" href="https://ricostacruz.com/nprogress/">官网</a></p>
<h3 id="汉字转换拼音-pinyin"><a href="#汉字转换拼音-pinyin" class="headerlink" title="汉字转换拼音 pinyin"></a>汉字转换拼音 pinyin</h3><p>将中文转换为拼音数据显示 <a target="_blank" rel="noopener" href="https://github.com/hotoo/pinyin">GitHub</a> | <a target="_blank" rel="noopener" href="http://pinyin.hotoo.me/">官网</a></p>
<h3 id="内容全屏显示-screenfull"><a href="#内容全屏显示-screenfull" class="headerlink" title="内容全屏显示 screenfull"></a>内容全屏显示 screenfull</h3><p>将指定的内容进行全屏显示 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/screenfull">NPM</a> | <a target="_blank" rel="noopener" href="https://github.com/sindresorhus/screenfull">GitHub</a></p>
<h3 id="VUE国际化-vue-i18n"><a href="#VUE国际化-vue-i18n" class="headerlink" title="VUE国际化 vue-i18n"></a>VUE国际化 vue-i18n</h3><p>将VUE的项目内容国际化翻译 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/vue-i18n">NPM</a></p>
<h3 id="列表拖动-sortablejs"><a href="#列表拖动-sortablejs" class="headerlink" title="列表拖动 sortablejs"></a>列表拖动 sortablejs</h3><p>对列表内容进行拖动排序 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/sortablejs">NPM</a> <a target="_blank" rel="noopener" href="https://github.com/SortableJS/Sortable">GitHub</a></p>
<h3 id="拖动VUE组件-vuedraggable"><a href="#拖动VUE组件-vuedraggable" class="headerlink" title="拖动VUE组件 vuedraggable"></a>拖动VUE组件 vuedraggable</h3><p>对VUE项目中的组件进行拖动 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/vuedraggable">NPM</a> </p>
<h3 id="自定义滚动条-perfect-scrollbar"><a href="#自定义滚动条-perfect-scrollbar" class="headerlink" title="自定义滚动条 perfect-scrollbar"></a>自定义滚动条 perfect-scrollbar</h3><p>设置自定义滚动条及其样式； <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/perfect-scrollbar">NPM</a></p>
<h2 id="Node"><a href="#Node" class="headerlink" title="Node"></a>Node</h2><p>sqlite ： 本地存储数据的数据库</p>
<h3 id="Node热更新-nodemon"><a href="#Node热更新-nodemon" class="headerlink" title="Node热更新 nodemon"></a>Node热更新 nodemon</h3><p>检测到文件更改时自动重新启动<code>Node</code>应用程序 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/nodemon">NPM</a></p>
<h3 id="Node进程守护-pm2"><a href="#Node进程守护-pm2" class="headerlink" title="Node进程守护 pm2"></a>Node进程守护 pm2</h3><p>保证Node服务进程保持活跃状态；防止进程停摆 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/pm2">NPM</a></p>
<h3 id="终端颜色高亮-chalk"><a href="#终端颜色高亮-chalk" class="headerlink" title="终端颜色高亮 chalk"></a>终端颜色高亮 chalk</h3><p>让终端输出字符高亮或是添加颜色样式；<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/chalk">NPM</a></p>
<h2 id="扩展"><a href="#扩展" class="headerlink" title="扩展"></a>扩展</h2><h3 id="文档生成-VuePress"><a href="#文档生成-VuePress" class="headerlink" title="文档生成 VuePress"></a>文档生成 VuePress</h3><h3 id="桌面应用-Electron"><a href="#桌面应用-Electron" class="headerlink" title="桌面应用 Electron"></a>桌面应用 Electron</h3><p>可以用于构建PC端桌面应用，exe执行软件； <a target="_blank" rel="noopener" href="http://www.electronjs.org/">官方网站</a> </p>
  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%9F%E8%83%BD%E6%80%A7"><span class="toc-text">功能性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Cookie%E7%9A%84%E8%AE%BE%E7%BD%AE-js-cookie"><span class="toc-text">Cookie的设置 js-cookie</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%98%E5%82%A8%E6%95%B0%E6%8D%AE-localForage"><span class="toc-text">存储数据  localForage</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8-node-qrcode"><span class="toc-text">二维码生成器  node-qrcode</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%AA%E5%88%87%E6%9D%BF-clipboard"><span class="toc-text">剪切板 clipboard</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E5%99%A8-CodeMirror"><span class="toc-text">代码编辑器 CodeMirror</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%BC%96%E8%BE%91%E5%99%A8-bpmn-js"><span class="toc-text">流程图编辑器  bpmn-js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%BC%95%E5%AF%BC-driver-js"><span class="toc-text">前端引导 driver.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E6%8B%96%E6%8B%BD%E4%B8%8A%E4%BC%A0-dropzone"><span class="toc-text">文件拖拽上传 dropzone</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E8%A1%A8%E5%8A%9F%E8%83%BD-echarts"><span class="toc-text">图表功能 echarts</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E6%B5%81%E4%B8%8B%E8%BD%BD-FileSaver"><span class="toc-text">文件流下载 FileSaver</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9C%AC%E5%9C%B0%E6%95%B0%E6%8D%AE%E6%90%9C%E7%B4%A2-fuse-js"><span class="toc-text">本地数据搜索 fuse.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E8%AF%BB%E5%8F%96zip%E6%96%87%E4%BB%B6-jszip"><span class="toc-text">创建读取zip文件 jszip</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%84%E8%A7%88-docx%E6%96%87%E4%BB%B6-mammoth"><span class="toc-text">预览.docx文件 mammoth</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%84%E8%A7%88excel%E6%96%87%E4%BB%B6-sheetjs"><span class="toc-text">预览excel文件 sheetjs</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E5%A4%84%E7%90%86-moment"><span class="toc-text">日期格式处理 moment</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%B7%E6%B1%82%E8%BF%9B%E5%BA%A6%E6%9D%A1-nprogress"><span class="toc-text">请求进度条 nprogress</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B1%89%E5%AD%97%E8%BD%AC%E6%8D%A2%E6%8B%BC%E9%9F%B3-pinyin"><span class="toc-text">汉字转换拼音 pinyin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%86%85%E5%AE%B9%E5%85%A8%E5%B1%8F%E6%98%BE%E7%A4%BA-screenfull"><span class="toc-text">内容全屏显示 screenfull</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#VUE%E5%9B%BD%E9%99%85%E5%8C%96-vue-i18n"><span class="toc-text">VUE国际化 vue-i18n</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%8B%96%E5%8A%A8-sortablejs"><span class="toc-text">列表拖动 sortablejs</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8B%96%E5%8A%A8VUE%E7%BB%84%E4%BB%B6-vuedraggable"><span class="toc-text">拖动VUE组件 vuedraggable</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%BB%9A%E5%8A%A8%E6%9D%A1-perfect-scrollbar"><span class="toc-text">自定义滚动条 perfect-scrollbar</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node"><span class="toc-text">Node</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Node%E7%83%AD%E6%9B%B4%E6%96%B0-nodemon"><span class="toc-text">Node热更新 nodemon</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Node%E8%BF%9B%E7%A8%8B%E5%AE%88%E6%8A%A4-pm2"><span class="toc-text">Node进程守护 pm2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%88%E7%AB%AF%E9%A2%9C%E8%89%B2%E9%AB%98%E4%BA%AE-chalk"><span class="toc-text">终端颜色高亮 chalk</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%A9%E5%B1%95"><span class="toc-text">扩展</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E6%A1%A3%E7%94%9F%E6%88%90-VuePress"><span class="toc-text">文档生成 VuePress</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8-Electron"><span class="toc-text">桌面应用 Electron</span></a></li></ol></li></ol>
  </div>
</aside>

  
  
    <aside class="passage-copyright">
      <div>本文作者: 饿包子</div>
      
        <div>
          原文链接: 
          <a href="" target="_blank">https://lixianbin1.github.io/blog/2021/04/07/%E3%80%90%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA%E3%80%91%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93%E5%8C%85%E7%9A%84%E5%8F%82%E8%80%83%E5%8F%8A%E4%BB%8B%E7%BB%8D/</a>
        </div>
      
      <div>
        版权声明: 本博客所有文章除特别声明外, 均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议. 转载请注明出处!
      </div>
    </aside>
  
  
</div>

    </main>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2021/04/13/uni-app%20%E5%BC%80%E5%8F%91%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2021/01/23/%E5%AF%B9%E6%89%8B%E6%9C%BAAPP%E6%88%96%E7%94%B5%E8%84%91%E8%BF%9B%E8%A1%8C%E6%8A%93%E5%8C%85/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2021/04/13/uni-app%20%E5%BC%80%E5%8F%91%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2021/01/23/%E5%AF%B9%E6%89%8B%E6%9C%BAAPP%E6%88%96%E7%94%B5%E8%84%91%E8%BF%9B%E8%A1%8C%E6%8A%93%E5%8C%85/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>